<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
    html, body{
        height: 100%; width: 100%; padding: 0;
    }
    body{
        background: url('/Public/game/images/back.jpg') center no-repeat; background-size: cover;
        
    }
    #main {
        display: flex; flex-direction: row; align-items: center;justify-content: center; height: 100%;; gap: 10vw;
    }
    th, td{
        font-size: 1.25rem;gap: 1.5rem;padding: 0.2rem 1rem; text-align: center;
    }
    .clue, .game{
        width: 5rem;text-align: center;
    }
    button{
        padding: 0.2rem 1rem;
    }
    .clue-panel{
        width: 30vw;
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: 1.5rem;
    }
    .clue-list{
        height: 60vh;
        overflow-y: scroll;
    }
    .clue-item {
        line-height: 3rem;
    }
    .clue-item img{
        height: 3rem;
    }
    .clue-add{margin-top: 2rem;}
</style>
<body>
    <div id="main">
        <!-- <div class="clue-panel">
            <div class="clue-list">
                <volist name="clue" id="vo">
                    <div class="clue-item">{$vo.id}号线索:
                        <if condition="$vo['type'] eq 'text'">{$vo.content}</if>
                        <if condition="$vo['type'] eq 'image'"><img src="{$vo.content}"></if>
                    </div>
                </volist>
            </div>
            <div class="clue-add">
                <textarea id="add-content" name="clue" value="" rows="4" placeholder="请输入线索"></textarea><br/>
                <button id="clue-add">添加</button>
            </div>
        </div>   -->
        <table>
            <tr>
                <th>ID</th>
                <th>输入码</th>
                <!-- <th>修改</th> -->
                <th>状态</th>
                <th>结果</th>
                <th>操作</th>
                <th>心跳</th>
            </tr>
            <volist name="user" id="vo">
                <tr>
                    <td>{$vo.name}</td>
                    <!-- <td><input name="game" type="number" min="1" max="2" value="{$vo.game}" class="game" id="game{$vo.id}"></td> -->
                    <!-- <td><button name="set-game" data-id="{$vo.id}">修改</button></td> -->
                    <td id="password-{$vo.id}">{$vo.password}</td>

                    <td id="status-{$vo.id}">{$vo.status}</td>
                    <td><input class="clue" type="number" min="1" max="{$max}" name="clue" value="{$vo.clue}" id="clue{$vo.id}"></td>
                    <td>
                        <!-- <button name="load" value="{$vo.id}">载入</button> -->
                        <button name="send" value="{$vo.id}">发送结果</button>
                        <!-- <button name="coin" value="{$vo.id}">金币</button> -->
                        <!-- <button name="over" value="{$vo.id}">冷却</button> -->
                        <button name="reset" value="{$vo.id}">复位</button>
                        <button name="ready" value="{$vo.id}">准备</button>

                    </td>
                    <td id="refresh-{$vo.id}"></td>
                </tr>
            </volist>   
        </table>
    </div>
</body>
<script>
    function updateStatus(){
        $.ajax({
            url: "/Home/Trial/get_data_list",
            success: function(res){
                let data = res.data;
                for(let i = 0; i < data.length; i++){
                    $("#status-"+data[i].id).text(data[i].status)
                    $("#password-"+data[i].id).text(data[i].password)
                    $("#refresh-"+data[i].id).text(data[i].refresh_time)

                }
                setTimeout(updateStatus, 1000)
            }
        })
    }
    updateStatus()
    $("button[name='send']").click(function(){
        let id = $(this).val()
        let clue = $("#clue"+id).val()
        if(!clue){
           weui.alert('请输入正确的线索编号') 
           return;
        }
        let loading = weui.loading('发送线索')
        console.log(id, clue);
        $.ajax({
            url: "/Home/Trial/set_data",
            data:{
                id: id,
                clue: clue,
                status: 'clue'
            },
            success: function(res){
                loading.hide()
                if(res.status){
                    weui.alert('发送成功', function(){
                       window.location.reload() 
                    })
                }else{
                    weui.alert('发送失败', function(){
                        window.location.reload()
                    })   
                }
            }
        })
    })
    $("button[name='reset'], button[name='ready']").click(function(){
        let id = $(this).val()
        let status = $(this).attr('name') == 'reset' ? 'index' : 'ready'
        let statusLabel = status == 'index' ? '复位' : '准备'
        let loading = weui.loading(statusLabel)
        $.ajax({
            url: "/Home/Trial/set_data",
            data:{
                id: id,
                clue: null,
                status: status,
                password: null
            }, 
            success: function(res){
                loading.hide() 
                if(res.status){
                    weui.alert(`${statusLabel}完成`, function(){
                       window.location.reload() 
                    })
                }
            }
        })
    })
    $("button[name='load']").click(function(){
        let id = $(this).val()
        let loading = weui.loading('载入')
        $.ajax({
            url: "/Home/Trial/set_data",
            data:{
                id: id,
                clue: null,
                status: 'load'
            }, 
            success: function(res){
                loading.hide() 
                if(res.status){
                    weui.alert('载入完成', function(){
                       window.location.reload() 
                    })
                }
            }
        })
    })
    $("button[name='coin']").click(function(){
        let id = $(this).val()
        let loading = weui.loading('投币')
        $.ajax({
            url: "/Home/Trial/set_data",
            data:{
                id: id,
                clue: null,
                status: 'coin'
            }, 
            success: function(res){
                loading.hide() 
                if(res.status){
                    weui.alert('投币完成', function(){
                       window.location.reload() 
                    })
                }
            }
        })
    })
    $("button[name='over']").click(function(){
        let id = $(this).val()
        let loading = weui.loading('冷却')
        $.ajax({
            url: "/Home/Trial/set_data",
            data:{
                id: id,
                clue: null,
                status: 'over'
            }, 
            success: function(res){
                loading.hide() 
                if(res.status){
                    weui.alert('冷却完成', function(){
                       window.location.reload() 
                    })
                }
            }
        })
    })
    $("button[name='set-game']").click(function(){
        let id = $(this).attr('data-id')
        let game = $(this).attr('data-game')
        let newGame = $("#game" + id).val()
        if(!newGame){
            weui.alert('请输入正确的游戏编号')
            return;
        }
        $.ajax({
            url: "/Home/Trial/set_data?id=" + id + '&game=' + newGame, 
            success: function(res){
                if(res.status){
                    weui.alert('修改成功', function(){
                        window.location.reload()
                    })
                } 
            }
        })
    })
    $("#clue-add").click(function(){
        console.log('add');
        let content = $("#add-content").val()
        if(!content){
            weui.alert('请输入线索')
            return;
        }
        $.ajax({
            url: "/Home/Trial/add_clue",
            data:{
                content: content
            },
            success: function(res){
                if(res.status){
                    weui.alert('添加成功', function(){
                        window.location.reload()
                    })
                }
            }
        })
    })
</script>
</html>